<template>
	<view>
		<u-notice-bar :text="text1" mode="closable"></u-notice-bar>
		<view class="background">

			<image src="../../static/logo.png" mode="" class="image"></image>
			<view class="title">
				<text style="font-size: 40rpx; color: white;">0</text>
				<view class="Grade">默认等级</view>
				<view style="color: white;">上级分销商 : 无 <text class="fillin" @click="show = true">填写</text></view>
			</view>
			<view class="distribution">
				<view style="margin-top: 50rpx;">申请成为分销会员</view>
			</view>
		</view>

		<u-popup :show="show" mode="center" :round="10" @close="close">
			<view style="width: 600rpx;height: 250rpx;text-align: center;font-size: 40rpx;">
				<text style="">填写邀请码</text>
				<u--input placeholder="请输入内容" border="surround" clearable></u--input>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				text1: '成为分销会员，推广下级可获得额外收益，推广越多收益'
			};
		},
		methods: {
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss">
	.background {
		background-color: #FF4451;
		height: 350rpx;
		padding-top: 50rpx;
	}

	.image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-left: 40rpx;
		margin-top: 40rpx;
		float: left;
		margin-right: 50rpx;
	}

	.title {
		height: 165rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.Grade {
		padding-left: 20rpx;
		padding-right: 20rpx;
		width: 130rpx;
		border-radius: 25rpx;
		border: 1px solid white;
		color: white;
		background-color: #F79C0C;
	}

	.fillin {
		background-color: #FF838D;
		padding-left: 30rpx;
		padding-right: 30rpx;
		border-radius: 25rpx;
	}
	.distribution{
		width: 90%;
		height: 700rpx;
		border-radius: 20rpx;
		margin-left: 40rpx;
		background-color: white;
		margin-top: 50rpx;
		text-align: center;
		font-size: 45rpx;
		font-weight: 700;
	}
</style>